<template>
	<div class="BabyGrowth">
		<div class="BabyGrowth-Title">
			<div class="BabyGrowth-Title-cont">
				<div class="BabyGrowth-Title-cont-left">
					<img src="static/img/My/left.png" @click="ReduceAge()" v-if='AgeNum>0' class="ReduceAge" />
					<img src="static/img/My/NoClick.png" v-else style="transform: rotate(180deg);" />
				</div>
				<div class="BabyGrowth-Title-cont-font">{{AgeNum}}岁</div>
				<div class="BabyGrowth-Title-cont-right">
					<img src="static/img/My/left.png" @click="AddAge()" v-if='AgeNum<18' class="AddAge" />
					<img src="static/img/My/NoClick.png" v-else style="transform: rotate(180deg);" />
				</div>
			</div>
		</div>
		<div class="BabyGrowth-select">
			<div class="BabyGrowth-select-item-body">
				<div class="BabyGrowth-select-item" :class=" SelectItem[0].active ? 'BabyGrowth-select-item-active' : '' " @click="TabsItem(0)">
					{{SelectItem[0].title}}
				</div>
			</div>
			<div class="BabyGrowth-select-item-body">
				<div class="BabyGrowth-select-item" v-for='(item,index) in SelectItem' v-if="index>0" :class=" item.active ? 'BabyGrowth-select-item-active' : '' " @click="TabsItem(index)">
					{{item.title}}
				</div>
			</div>
		</div>
		<div class="BabyGrowth-margin">

		</div>
		<div class="BabyGrowth-Body">
			<!--理财产品-->
			<div class="BabyGrowth-Body-Item" v-for="item in DataInfo[0].lc" @click="GoTo(1)" v-show="SelectItem[1].active || SelectItem[0].active">
				<div class="Item-Title">
					<div class="Title-Cont"><span>{{item.name}}</span></div>
					<div class="Title-Tips"><span>{{item.tips}}</span></div>
				</div>
				<div class="Item-Body">
					<div class="Item-Num">
						<div class="Item-NumL">
							<span>{{item.bfb}}</span>
						</div>
						<div class="Item-NumZ">
							<span>{{item.nh}}</span>
						</div>
					</div>

					<div class="Item-Cont">
						<div class="Item-ContL">
							<span>{{item.sy}}</span>
						</div>
						<div class="Item-ContZ">
							<span>{{item.gs}}</span>
						</div>
					</div>
				</div>

			</div>
			
			<!--基金-->
			<div class="BabyGrowth-Body-Item" v-for="item in DataInfo[1].jj" @click="GoTo(1)" v-show="SelectItem[2].active || SelectItem[0].active">
				<div class="Item-Title">
					<div class="Title-Cont"><span>{{item.name}}</span></div>
					<div class="Title-Tips"><span>{{item.tips}}</span></div>
				</div>
				<div class="Item-Body">
					<div class="Item-Num">
						<div class="Item-NumL">
							<span>{{item.bfb}}</span>
						</div>
						<div class="Item-NumZ">
							<span>{{item.nh}}</span>
						</div>
					</div>

					<div class="Item-Cont">
						<div class="Item-ContL">
							<span>{{item.sy}}</span>
						</div>
						<div class="Item-ContZ">
							<span>{{item.gs}}</span>
						</div>
					</div>
				</div>

			</div>
			
			<!--定投-->
			<div class="BabyGrowth-Body-Item" v-for="item in DataInfo[2].dt" @click="GoTo(1)" v-show="SelectItem[3].active || SelectItem[0].active">
				<div class="Item-Title">
					<div class="Title-Cont"><span>{{item.name}}</span></div>
					<div class="Title-Tips"><span>{{item.tips}}</span></div>
				</div>
				<div class="Item-Body">
					<div class="Item-Num">
						<div class="Item-NumL">
							<span>{{item.bfb}}</span>
						</div>
						<div class="Item-NumZ">
							<span>{{item.nh}}</span>
						</div>
					</div>

					<div class="Item-Cont">
						<div class="Item-ContL">
							<span>{{item.sy}}</span>
						</div>
						<div class="Item-ContZ">
							<span>{{item.gs}}</span>
						</div>
					</div>
				</div>

			</div>
			
			
			<!--保险-->
			<div class="BabyGrowth-Body-Item" v-for="item in DataInfo[3].bx" @click="GoTo(1)" v-show="SelectItem[4].active || SelectItem[0].active">
				<div class="Item-Title">
					<div class="Title-Cont"><span>{{item.name}}</span></div>
					<div class="Title-Tips"><span>{{item.tips}}</span></div>
				</div>
				<div class="Item-Body">
					<div class="Item-Num">
						<div class="Item-NumL">
							<span>{{item.bfb}}</span>
						</div>
						<div class="Item-NumZ">
							<span>{{item.nh}}</span>
						</div>
					</div>

					<div class="Item-Cont">
						<div class="Item-ContL">
							<span>{{item.sy}}</span>
						</div>
						<div class="Item-ContZ">
							<span>{{item.gs}}</span>
						</div>
					</div>
				</div>

			</div>
			<div class="MoreDiv">
				 <div class="MoreLine"></div><span class="MoreSpan">暂无更多</span><div class="MoreLine"></div>
			</div>
			
		</div>
	</div>
</template>

<script>
	export default {
		name: 'BabyGrowth',
		data() {
			return {
				SelectItem: [{
					title: '全部',
					active: true
				}, {
					title: '理财产品',
					active: false
				}, {
					title: '基金',
					active: false
				}, {
					title: '定投',
					active: false
				}, {
					title: '保险',
					active: false
				}, ],
				AgeNum: 5,
				List: 5,
				DataInfo: [{
					'lc': [{
						name: '华夏理财宝',
						tips: '理财',
						bfb: '4.5110%',
						nh: '七日年化',
						sy: '收益稳，0利率',
						gs: '淘迪儿童银行用户专享'
					}]
				}, {
					'jj': [{
						name: '华夏基金宝',
						tips: '基金',
						bfb: '4.5110%',
						nh: '七日年化',
						sy: '收益稳，0利率',
						gs: '淘迪儿童银行用户专享'
					}]
				}, {
					'dt': [{
						name: '华夏定投宝',
						tips: '定投',
						bfb: '4.5110%',
						nh: '七日年化',
						sy: '收益稳，0利率',
						gs: '淘迪儿童银行用户专享'
					}]
				}, {
					'bx': [{
						name: '华夏保险宝',
						tips: '保险',
						bfb: '4.5110%',
						nh: '七日年化',
						sy: '收益稳，0利率',
						gs: '淘迪儿童银行用户专享'
					}]
				}]
			}
		},
		created: function() {
			console.log(this.SelectItem[1].active)
		},
		methods: {
			//切换tabs
			TabsItem: function(e) {
				if(e == 0) {
					this.SelectItem.forEach(function(v, index) {
						if(index > 0) {
							v.active = false
						}

					})
					this.SelectItem[0].active = !this.SelectItem[0].active
				} else {
					this.SelectItem[0].active = false
					this.SelectItem[e].active = !this.SelectItem[e].active
				}

			},
			//减少年龄
			ReduceAge: function() {
				if(this.AgeNum > 0) {
					this.AgeNum--
				}
			},
			//增加年龄
			AddAge: function() {
				if(this.AgeNum < 18) {
					this.AgeNum++
				}
			},
			//跳转
			GoTo: function(e) {
				//跳转登陆
				this.$router.push({
					path: `Product/${e}`
				})
			},

		}
	}
</script>

<style scoped>
	@import url("css/BabyGrowth.css");
</style>